سفارش تبلیغ
صبا ویژن
مدیر وبلاگ
 
آمار واطلاعات
بازدید امروز : 157
بازدید دیروز : 35
کل بازدید : 2170184
کل یادداشتها ها : 596
خبر مایه


 

یک قالب خوب
می‌خواهیم یه صفحه طراحی کنیم که مواردی رو که تو بخش قبل گفتیم داشته باشه.
به کد زیر توجه کنید، خیلی کد ساده‌ایه، از قیافه وحشتناکش نترسین، الان خط به خط توضیح میدهیمش:

توجه کنید که وقتی در حالت HTML هستید میتونید روی یک تگ کلیک کنید و بعد راست کلیک کنید و از منویی که باز میشه گزینه آخرش که Tag Properties هست رو انتخاب کنید و تمام تنظیمات اون رو دستکاری کنید.

  خط اول که یه صفحه HTML میسازه که راست نویسه (مخصوص صفحات فارسی)

اون Meta Tag هایی که بین دوتا تگ Head قرار گرفته مشخص میکنه که صفحه فارسی نوشته شده و از کدپیج یونی‌کد استفاده میکنه (اگه نمیدونین چیه هیمنطوری استفاده کنید.)

خط بعد که عنوان صفحه رو تعیین میکنه. (قبلا دیدیم.)

بعد که تگ Body شروع میشه و توی این تگ مشخصات صفحه از قبیل رنگ نوشته‌ها و پس زمینه مشخص میشه.

بعد یک پاراگراف داریم که بصورت وسط چین قرار گرفته (Align=center)

داخل اون پاراگراف اول خط رو Bold میکنیم (<b>) و بعد اندازه و رنگ فونت رو تغییر میدیم که نام سایت رو بزرگ و کلفت وسط صفحه بنویسیم.

بعد یک خط افقی می‌کشیم که عنوان سایت از نوشته‌ها جدا بشه.

حالا میرسیم به تگ «MtEntry» که نوشته‌ها رو نشون میده. ما یکی از سوییچ‌های این تگ رو استفاده کردیم به نام «lastn» که عدد بعدش نشون میده چند تا از آخرین نوشته‌ها رو باید نشون بده که ما اینجا 15 تا از آخرین نوشته‌ها رو نشون میدیم.

بعد یک DIV درست کردیم. (Div یک تگ خاص در HTML است که باعث میشه محتویات داخل اون از بقیه صفحه جدا بشه. تقریبا مثل یک جدول تک سلولی کار میکنه، اما تفاوتش نسبت به جدول اینه که خیلی ساده به کار میره و تازه، نوشته‌های داخل اون در حین این که دارن از اینترنت گرفته میشن نشون داده میشه، ولی در یک جدول تا تمام محتویات جدول گرفته نشده باشه اون جدول نشون داده نمیشه.)
رنگ داخل اون و اندازه و نوع حاشیه‌اش رو تنظیم کردیم که یک کادر خاکستری با خط حاشیه طوسی و فاصله متن از اطراف 5 نقطه کشیده بشه.

اندازه خط رو کوچیک می‌کنیم چون میخواهیم عنوان نوشته‌ها رو بنویسیم. و بعد عنوان نوشته‌ها رو بصورت Bold مینویسیم.

بعد یک DIV دیگه تعریف می‌کنیم که دوباره بتونیم دور نوشته‌هامون یک کادر بکشیم. البته این بار رنگ زمینه رو یک کم روشن تر کردیم و حاشیه رو خط چین گزاشتیم. (الان استفاده از خط چین خیلی مد شده)

حالا متن هر نوشته داخل اون قرار میگیره.

بعد خط رو دوباره کوچیک میکنیم، چون میخواهیم نام نویسنده و تاریخ نوشته و نظرخواهی رو زیر نوشته بصورت کوچیک نمایش بدیم. (دقت کنید که اینها خارج از اون DIVی قرار گرفته که متن نوشته‌ها رو در بر گرفته بود و حاشیه‌اش خط چین بود ولی هنوز داخل او DIVی هست که عنوان و متن نوشته رو باهم در بر گرفته و حاشیه‌اش ساده بود.)

حالا متن فارسی «نوشته شده توسط:»  رو می‌نویسیم و بعدش از تگ «<MTEntryAuthor>» برای جایگزین شدن با نام نویسنده مطلب استفاده کردیم
به همین صورت نوشته «در تاریخ:» به دنبالش تگ «<$
MTEntryDate$>» قرار گرفته که تاریخ نوشته‌شدن مطلب رو نشون میده.

این قسمتش جالبه. یک سری از تگ‌های ام تی، تگ‌های شرطی هستند. یعنی اگر اون شرط برقرار باشه مطالب داخل اونها نشون داده میشه و در غیر این صورت اصلا انگار که همچین نوشته‌ای قبلا وجود نداشته.
اینجا ما از تگ شرطی «<
MTEntryIfAllowComments>» استفاده کردیم که در صورت برقرار بودن شرط اون مطالب داخل اون نشون داده میشه. مقادیر داخل این تگ در صورتی نشون داده میشه که شما در هنگام نوشتن مطالب خود گزینه باز بودن نظرخواهی رو انتخاب کرده باشین.
یک نکته دیگه که اینجا به کار رفته اینه که ما یک خط عمودی کوچیک بین تاریخ و نویسنده قرار دادیم که همیشه دیده میشه چون همیشه یک مطلب هم عنوان داره و هم تاریخ نشرش مشخصه، اگه ما اون خط عمودی رو که خط زیر تگ «<
MTEntryIfAllowComments>» قرار دادیم می‌آوردیم بیرون تگ قرار میدادیم، یک خط عمودی همیشه بعد از تاریخ دیده میشه حتی اگه اون نوشته نظرخواهی نداشته باشه. اما حالا تنها در صورتی این خط عمودی بعد از تاریخ قرار میگیره که اون نوشته نظرخواهیش فعال باشه.

بعد هم یک لینک درس کردیم به صفحه نظرخواهی اون مطلب خواص. (این تگ رو همینطوری که هست بکار ببرید. چون یخورده پیچیده‌است.)

بعدش هم که همه تگ‌های زوجی رو که تا حالا باز مونده می‌بندیم (با استفاده از «/» و همه چیز تموم شد.

این یک قالب خوشگل و تر و تمیز شد. که واقعا برای همین چند خطی که نوشتیم خیلی خوبه.






طراحی پوسته توسط تیم پارسی بلاگ